<template>
  <!--设备二维码标签重新生成弹窗-->
  <px-dialog v-model="visible" title="设备二维码标签重新生成" width="1200px" destroy-on-close append-to-body inline @close="handleCancel">
    <px-form ref="formRef" :model="formValue" label-width="100px">
      <px-row>
        <px-col :span="10">
          <EquipClassSelect :isRequired="false" :className="formValue.classCode" @changeClassName="changeClassName" />
        </px-col>
      </px-row>
    </px-form>
    <div class="descriptions-box">
      <p>说明：</p>
      <ul>
        <li>1. 该功能用于对数据字典中“科室值班电话”修改后对设备二维码标签进行批量重新生成；</li>
        <li>2. 如不选择厂区、科室，点击“确定”按钮后，则对全部设备进行二维码标签重新生成；</li>
        <li>3. 如只选择厂区，则对该厂区内所有设备二维码标签进行重新生成；</li>
        <li>4. 如同时选择了厂区、科室，则对所选择的厂区/科室下的所有设备二维码标签进行重新生成；</li>
        <li>5. 重新生成标签时间较长，执行重新生成命令后24小时全部更新完毕。</li>
      </ul>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <px-button @click="handleCancel">取 消</px-button>
        <px-button type="primary" @click="handleSubmitAuditForm(formRef)">确 定</px-button>
      </div>
    </template>
  </px-dialog>
</template>

<script lang="ts" setup>
import { batchCreateEqpImgs } from "@/api/equip/archive";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import { PxMessage } from "px-ui";
import { computed, ref } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible"]);

const visible = computed(() => props.visible);

const formRef = ref();

// 外部封装好的组件
// 科室组件调用父组件
const changeClassName = val => {
  formValue.value.classCode = val;
};

const formValue = ref<Record<string, any>>({});

const handleCancel = () => {
  formValue.value.classCode = "";
  formRef.value.resetFields();
  emits("closeDialog");
};

/** 提交按钮 */
const handleSubmitAuditForm = async (formEl: any) => {
  try {
    if (!formEl) return;
    await formEl.validate(async valid => {
      if (valid) {
        await batchCreateEqpImgs({ ...formValue.value });
        PxMessage.success("设备二维码标签重新生成中，请耐心等待~");
        handleCancel();
      }
    });
  } catch {}
};
</script>

<style lang="scss" scoped>
.descriptions-box {
  display: flex;
  flex-direction: row;
  margin-left: 56px;
  font-size: 15px;
  color: #666;
}
</style>
